<template>
    <router-link :to="`/consult/2/${msg.title}`" class="s_box" :style="{'background-image': 'url('+ msg.bg +')'}" :class="{fadeIn : top < $parent.$parent.scrollTop}" tag="div">
      <div class="s_head">
          <span :style="{'background-image': 'url('+ msg.icon +')'}"></span>
          {{msg.title}}
      </div>
      <div class="s_text">
          {{msg.text}}
      </div>
  </router-link>
</template>
<script>
export default {
  props: ['msg'],
  data() {
      return {
          top: 0
      }
  },
  mounted() {
      this.top = this.$el.offsetTop - window.innerHeight;
    //   alert(this.top + '$$' + this.$parent.$parent.scrollTop)
  },
}
</script>
<style scoped>
.s_box{
    position: relative;
    left: 100%;
    margin: 0 auto;
    padding: 0.8rem 0.38rem 0;
    height: 4.1rem;
    width: 6.81rem;
    background-size: cover;
    background-position: center center;
    margin-bottom: 0.25rem;
    transition: all 0.5s;
}
.fadeIn{
    left: 0;
}
.s_head{
    font-weight: bold;
    color: #fff;
    font-size: 0.3rem;
    margin-bottom: 0.54rem;
}
.s_head>span{
    display: inline-block;
    float: left;
    margin-top: 0.02rem;
    margin-right: 0.15rem;
    height: 0.38rem;
    width: 0.38rem;
    background-size: contain;
    background-position:  center center;
    background-repeat: no-repeat;
}
.s_text{
    font-size: 0.28rem;
    color: #ccc;
    line-height: 0.45rem;
}
</style>